<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="${contextPath}/libs/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="${contextPath}/libs/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="${contextPath}/libs/zTree/js/jquery.ztree.all.js"></script>
</head>
<body>

<div>

    <div>
        <a href="${contextPath}/logout">注销</a>
        <button id="saveUserMenus">保存</button>
    </div>

    <div class="zTreeDemoBackground left">
        <ul id="menuTree" class="ztree"></ul>
    </div>

</div>


<script>
    $(function () {
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: null
                }
            }
        };

        $('#saveUserMenus').click(function () {
            var treeObj = $.fn.zTree.getZTreeObj("menuTree");
            var nodes = treeObj.getCheckedNodes(true);
            var nodeIds = [];
            if (nodes) {
                $.each(nodes, function () {
                    if (!this.isParent && this.checked) {
                        nodeIds.push(this.id);
                    }
                });
                console.info(nodeIds);
                $.ajax({
                    type: "POST",
                    url: '${contextPath}/user/menus',
                    dataType: 'json',
                    data: {'menuIds': nodeIds},
                    success: function (result) {
                        location.href = '${contextPath}/menu';
                    }
                });
            }

        });

        function loadUserMenus() {
            $.ajax({
                type: "GET",
                url: '${contextPath}/user/menus',
                dataType: 'json',
                success: function (result) {
                    var allMenus = result['allMenus'];
                    var userMenus = result['userMenus'];
                    if (userMenus) {
                        var userMenuIds = [];
                        for (var i = 0; i < userMenus.length; i++) {
                            userMenuIds.push(userMenus[i]['id']);
                        }
                        $.each(allMenus, function () {
                            if ($.inArray(this.id, userMenuIds) != -1) {
                                this['checked'] = true;
                            }
                        });
                    }

                    $.fn.zTree.init($("#menuTree"), setting, allMenus);
                    var treeObj = $.fn.zTree.getZTreeObj("menuTree");
                    treeObj.expandAll(true);
                }
            });
        }

        function init() {
            loadUserMenus();
        }

        init();

        var zNodes = [
            {id: 1, pId: 0, name: "随意勾选 1", open: true},
            {id: 11, pId: 1, name: "随意勾选 1-1", open: true},
            {id: 111, pId: 11, name: "随意勾选 1-1-1"},
            {id: 112, pId: 11, name: "随意勾选 1-1-2"},
            {id: 12, pId: 1, name: "随意勾选 1-2", open: true},
            {id: 121, pId: 12, name: "随意勾选 1-2-1"},
            {id: 122, pId: 12, name: "随意勾选 1-2-2", checked: true},
            {id: 2, pId: 0, name: "随意勾选 2", checked: true, open: true},
            {id: 21, pId: 2, name: "随意勾选 2-1"},
            {id: 22, pId: 2, name: "随意勾选 2-2", open: true},
            {id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true},
            {id: 222, pId: 22, name: "随意勾选 2-2-2"},
            {id: 23, pId: 2, name: "随意勾选 2-3"}
        ];


    });
</script>
</body>
</html>
